<template>
  <BasicTable @register="registerTable">
  </BasicTable>
</template>
<script lang="ts"
  setup>
  import { BasicTable, useTable } from '@/components/Table';
  import { watch, onMounted } from "vue";

  const props = defineProps({
    loading: { type: Boolean },
  })

  const [registerTable, { setColumns, setTableData, setLoading }] = useTable({
    title: '本周期数据占比',
    columns: [],
    pagination: false,
  });

  onMounted(() => {
    setLoading(true);
  })

  watch(
    () => props.loading,
    (val) => {
      setLoading(val);
    },
  );

  const formatHeader = (headerData, tableData) => {
    const headerList = headerData.map(item => ({
      title: item,
      dataIndex: item,
      width: 100
    }))
    headerList.unshift(

      {
        title: '数据名称',
        dataIndex: 'classifyName',
        width: 120,
        fixed: 'left',
        merge: true,
      })
    setColumns(headerList);
  }

  const formatTableData = (tableData) => {
    const data = tableData.map((item, index) => {
      const { dataMap, ...others } = item
      return {
        ...dataMap, ...others
      }
    })
    setTableData(data)
    return data
  }

  const setData = (header, tableData) => {
    const formatData = formatTableData(tableData)
    formatHeader(header, formatData)
  }
  defineExpose({
    setData
  })


</script>
